/**
 * CalendarWeekHeader 用于周视图的header展示，
 * 是CalendarHeader（同级目录下的index文件，用于月视图）的复用与修改
 * */

import React, { Component } from 'react';
import { ActivityIndicator } from 'react-native';
import { View, Text, TouchableOpacity, Image } from 'react-native';
import XDate from '../../xdate';
import PropTypes from 'prop-types';
import styleConstructor from './style';
import { weekDayNames } from '../../dateutils';

class CalendarWeekHeader extends Component {
  static propTypes = {
    theme: PropTypes.object,
    hideArrows: PropTypes.bool,
    month: PropTypes.instanceOf(XDate),
    addMonth: PropTypes.func,
    showIndicator: PropTypes.bool,
    firstDay: PropTypes.number,
    renderArrow: PropTypes.func,
    hideDayNames: PropTypes.bool,
    weekNumbers: PropTypes.bool
  };

  constructor(props) {
    super(props);
    this.style = styleConstructor(props.theme);
    this.addMonth = this.addMonth.bind(this);
    this.substractMonth = this.substractMonth.bind(this);
  }

  addMonth() {
    this.props.addMonth(1);
  }

  substractMonth() {
    this.props.addMonth(-1);
  }

  translateView = () =>{
      this.props.translateView();
  }
  addWeek = () =>{
      this.props.addWeek();
  }

  substractWeek = () =>{
      this.props.substractWeek();
  }

  shouldComponentUpdate(nextProps) {
    if (
      nextProps.month.toString('yyyy MM') !==
      this.props.month.toString('yyyy MM')
    ) {
      return true;
    }
    if (nextProps.showIndicator !== this.props.showIndicator) {
      return true;
    }
    return false;
  }

  render() {
    let leftArrow = <View />;
    let rightArrow = <View />;
    let weekDaysNames = weekDayNames(this.props.firstDay);
    if (!this.props.hideArrows) {
      leftArrow = (
        <TouchableOpacity
          onPress={this.substractWeek}
          style={this.style.arrow}
        >
          {this.props.renderArrow
            ? this.props.renderArrow('left')
            : <Image
                source={require('../img/previous_tall.png')}
                //style={this.style.arrowImage}
              />}
        </TouchableOpacity>
      );
      rightArrow = (
        <TouchableOpacity onPress={this.addWeek} style={this.style.arrow}>
          {this.props.renderArrow
            ? this.props.renderArrow('right')
            : <Image
                source={require('../img/next_tall.png')}
                //style={this.style.arrowImage}
              />}
        </TouchableOpacity>
      );
    }
    let indicator;
    if (this.props.showIndicator) {
      indicator = <ActivityIndicator />;
    }
    return (
        <View>
            <View style={this.style.header}>
                <Text style={this.style.monthText}>
                    {this.props.month.toString(this.props.monthFormat ? this.props.monthFormat : 'yyyy')}
                </Text>

                <View style={{flexDirection: 'row'}}>
                    <View style={{marginRight:20}}>
                        {leftArrow}
                    </View>
                    <Text style={this.style.monthText}>
                        {this.props.month.toString(this.props.monthFormat ? this.props.monthFormat : 'MMMM')}
                    </Text>
                    <View style={{marginLeft:20}}>
                        {rightArrow}
                    </View>
                </View>
                <TouchableOpacity onPress={this.translateView} style={this.style.arrow}>
                    <Image
                        source={require('../img/trigger.png')}
                    />
                </TouchableOpacity>
            </View>
            {
                !this.props.hideDayNames &&
                <View style={this.style.week}>
                    {this.props.weekNumbers && <Text style={this.style.dayHeader}></Text>}
                    {weekDaysNames.map((day, idx) => (
                        <Text key={idx} style={this.style.dayHeader} numberOfLines={1}>{day}</Text>
                    ))}
                </View>
            }
        </View>
    );
  }
}

export default CalendarWeekHeader;
